<template>
	<view>
		<z-paging ref="paging" v-model="infoList" @query="queryList" >
			<view slot="top">
				<view class="line"></view>
				<view class="timebg">
					<picker class="timetxt" mode="date" :value="date" :start="startDate" :end="endDate" fields="year"
						@change="bindDateChange">
						<view style="display: flex;align-items: center;">{{date}}
							<image src="../../../static/sanjiao.png" class="sanjiao"></image>
						</view>
					</picker>

					<!-- <view class="timetxt">
						<select-lay class="select-lay" :value="quarterValue" slabel="type" svalue="typeid"
							placeholder="季度" :showplaceholder="false" :options="quarterArr"
							@selectitem="quarterselectitem"></select-lay>
					</view> -->
				</view>
			</view>
			
			<view class="itemView" v-for="(item,index) in infoList">
				<view style="display: flex;flex-direction: row;">
					<image src="@/static/service_2.png"
						style="width: 64rpx;height: 64rpx;margin-top: 6rpx;">
					</image>
					<view style="display: flex;flex-direction: column;margin-left: 17rpx;">
						<text class="itemtitle">{{item.ysxzName}}</text>
						<text class="itemaddress">{{item.dwmc}}</text>
					</view>
				</view>
				<view class="monthlist">
					<view v-for="i in item.list" class="monthitem">
						<text class="month">{{i.name}}</text>
						<view class="data">{{i.data}}</view>
					</view>
				</view>
				
				<view class="total">
					<view class="circle" style="background: #6BA9FF;"></view>
					<text class="total_title">合计(m³)：</text>
					<text class="data" style="flex: 1;text-align: right;">{{item.yearcount}}</text>
				</view>
			</view>
		</z-paging>
		<suspended @userData="childData"></suspended>
	</view>
</template>

<script>
	import {GetJHTZList} from "@/common/api.js"
	export default {
		data() {
			return {
				quarterArr: [{
					type: '一季度',
					typeid: 1
				}, {
					type: '二季度',
					typeid: 2
				}, {
					type: '三季度',
					typeid: 3
				}, {
					type: '四季度',
					typeid: 4
				}],
				quarterValue: '',

				date: '年度',
				startDate: '1900',
				endDate: '2200',
				
				infoList:[],
				monthList:[]
			}
		},


		methods: {

			quarterselectitem(index, item) {
				this.quarterValue = item.typeid
				console.log(this.quarterValue);
			},

			bindDateChange(e) {
				console.log(e);
				this.date = e.target.value
				this.$refs.paging.reload();
			},

			async queryList(pageNo, pageSize) {
				var that = this
				if(this.date == '年度') {
					uni.showToast({
						title:'请选择查询时间',
						icon:'none'
					})
					return
				}
				var data = {
					nd:this.date
				}
				let res = await GetJHTZList(data)
				res.response.data.forEach((item,index) =>{
					that.monthList = []
					that.monthList.push({name:'一季度',data:item.jd1})
					that.monthList.push({name:'二季度',data:item.jd2})
					that.monthList.push({name:'三季度',data:item.jd3})
					that.monthList.push({name:'四季度',data:item.jd4})
					that.monthList.push({name:'1月',data:item.months1})
					that.monthList.push({name:'4月',data:item.months4})
					that.monthList.push({name:'7月',data:item.months7})
					that.monthList.push({name:'10月',data:item.months10})
					that.monthList.push({name:'2月',data:item.months2})
					that.monthList.push({name:'5月',data:item.months5})
					that.monthList.push({name:'8月',data:item.months8})
					that.monthList.push({name:'11月',data:item.months11})
					that.monthList.push({name:'3月',data:item.months3})
					that.monthList.push({name:'6月',data:item.months6})
					that.monthList.push({name:'9月',data:item.months9})
					that.monthList.push({name:'12月',data:item.months12})
					item.list = that.monthList
				})
				this.$refs.paging.complete(res.response.data);
				console.log(this.infoList)
			},
			
			childData(param) {
				this.$refs.paging.reload();
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f4f4f4;
	}
	
	.pageView {
		padding: 0 24rpx 0 24rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #f4f4f4;
	}

	.timebg {
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.timetxt {
		width: 50%;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sanjiao {
		width: 20rpx;
		height: 14rpx;
		margin-left: 17rpx;
	}

	.select-lay {
		width: 60%;
		height: 100%;
		background: transparent;
	}
	
	.itemView {
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		padding: 24rpx;
		margin: 24rpx;
	}
	
	.title {
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		display: flex;
		flex-direction: column;
		margin-left: 29rpx;
		flex: 1;
	}
	
	.time {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
		margin-top: 16rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.line-l {
		width: 1rpx;
		height: 17rpx;
		background-color: #CCCCCC;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	
	.itemtitle {
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 48rpx;
	}
	
	.itemaddress {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
		margin-top: 16rpx;
	}
	
	.monthlist {
		width: 100%;
		flex-wrap: wrap;
		display: flex;
		justify-content: flex-start;
		align-content: space-between;
		margin-top: 19rpx;
	}
	
	.monthitem {
		width: 157rpx;
		height: 100rpx;
		background: #F7F7F7;
		border-radius: 5rpx;
		margin: 5rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.month {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 37rpx;
	}
	
	.data {
		font-size: 26rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 37rpx;
		margin-top: 5rpx;
	}
	
	.total {
		height: 85rpx;
		background: #E0F7FF;
		border-radius: 16rpx;
		margin-top: 16rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0rpx 24rpx 0 24rpx;
	}
	
	.total_title {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 37rpx;
		margin-left: 16rpx;
	}
	.circle {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: #FFFFFF;
	}
</style>
